<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>margin塌陷</title>
<!--    第一个子元素的上margin会作用在父元素上,最后一个子元素的下margin会作用在父元素上-->
<!--    解决办法:1.给父元素设置不为0的padding 2.给父元素设置不为0的border,给父元素设置css样式:overflow:hidden
        overflow:hidden
            1.溢出隐藏
            2.清除浮动
            3,解决外边距塌陷
-->
    <style>
        .outer{
            width: 400px;
            height: 400px;
            background-color: gray;
            overflow:hidden
        }
        .inner1{
            width: 100px;
            height: 100px;
            background-color: orange;
            /* 给inner1加下外边框，没问题 */
            /* margin-bottom: 50px;*/

            /* 给inner1加上外边框，外边框动了，两个小框反而没动 */
            margin-top: 50px;
        }
        .inner2{
            width: 100px;
            height: 100px;
            background-color: green;
            /* 给inner2加上外边框，没问题 */
             margin-bottom: 100px;
        }

    </style>
</head>
<body>
<div class="outer">
    <div class="inner1">inner1</div>
    <div class="inner2">inner2</div>

</div>111
</body>

</html>